<template>
  <div class="customerSea">
    <el-card shadow="never">
      <div class="seaTitle">
        <div class="tabs">
          <el-tabs v-model="seaActiveIndex" @tab-click="tabClick">
            <el-tab-pane :label="item.name" :name="index.toString()" v-for="(item, index) in seaids" :key="item.id">
              <!-- <tab-pane-item v-if="seaActiveIndex == index.toString()" :seaId="item.id" :seaName="item.name" /> -->
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="btns">
          <el-button plain @click="toOtherImport">第三方接入 </el-button>
          <el-button plain @click="router.push('/customer/manage/commonSea')">公海管理</el-button>
        </div>
      </div>
      <div class="seaContent">
        <tab-pane-item v-if="randomKey" :key="randomKey" :seaId="seaId" :seaName="seaName" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed } from 'vue'
  import tabPaneItem from './components/tabPaneItem.vue'
  import { seaList } from '@/api/customerCenter/customerSea'
  import { getCustomerOpenseaSelect } from '@/api/customer/manage/list'

  import router from '@/router'

  type SeaType = {
    name: string
    id: number
    [propName: string]: any
  }
  let seaids = reactive<SeaType[]>([])
  let seaActiveIndex = ref<string>('0')
  let isAbleToGo = ref<boolean>(false)

  let randomKey = ref<string>('')
  let seaId = ref<string | number>()
  let seaName = ref<string>()

  let seaActiveId = computed<string | number>(() => {
    return seaids[Number(seaActiveIndex.value)].id
  })

  const getSeaList = () => {
    getCustomerOpenseaSelect({ type: 1 }).then((res: any) => {
      if(res?.length){
        seaids.push(...res)
        seaId.value = res[0].id
        seaName.value = res[0].name
        randomKey.value = getRandomKey()
      }
    })
  }
  getSeaList()

  const tabClick = (pane: any): void => {
    const { index } = pane
    seaId.value = seaids[Number(index)].id
    seaName.value = seaids[Number(index)].name
    randomKey.value = getRandomKey()
  }

  const toOtherImport = ()=>{
    router.push('/customer/manage/sea/otherImport?seas_id=' + seaActiveId)
    // if(!!seaids.length){
    //   router.push('/customer/manage/sea/otherImport?seas_id=' + seaActiveId)
    // }else if(isAbleToGo.value){
    //   router.push('/customer/manage/sea/otherImport?seas_id=' + seaActiveId)
    // }else{
    //   isAbleToGo.value = true
    // }
  }

  const getRandomKey = (num?: number): string => {
    const t = 'ABCDEFGHJKMNPQRSTWXYZ0123456789abcdefhijkmnprstwxyz?_*%$#'
    let total: string = ''
    let n: number = 0
    if (typeof num === 'number' && num > 0 && num < 21) {
      while (n < num) {
        const add = t[Math.round(Math.random() * Number(t.length - 1))]
        total = `${total}${add}`
        n++
      }
    } else {
      total = getRandomKey(16)
    }
    return total
  }
</script>
<style scoped lang="scss">
  :deep(.el-card__body) {
    padding: 10px 24px 24px;
  }
  .customerSea {
    :deep(.el-card__body) {
      .seaTitle {
        position: relative;
        width: 100%;
        margin-bottom: 25px;
        .tabs {
          width: 100%;
          flex: 1;
          .el-tabs__header {
            margin: 0;
            border-bottom: 1px solid #EAEAEA;
          }
          .el-tabs__nav-wrap {
            margin-right: 230px;
            &::after {
              content: none;
            }
          }
          .el-tabs__nav-next, .el-tabs__nav-prev {
            line-height: 56px;
          }
          .el-tabs__item {
            height: 56px;
            line-height: 56px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
            &.is-active {
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #FF6B00;
            }
          }
        }
        .btns {
          position: absolute;
          right: 0;
          top: 10px; 
          .el-button {
            padding: 11px 12px;
            font-size: 14px;
            height: 36px;
            min-height: auto;
          }
        }
      }
    }
  }
</style>
